<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="6" :md="6" :sm="24">
            <a-form-item label="业主名称">
              <j-popup
                v-model="queryParam.owner_code"
                org-fields="owner_code,owner_name,owner_type,owner_trade,id_card"
                dest-fields="ownerCode,ownerName,ownerType,ownerTrade,idCard"
                field="ownerCode"
                code="v_xy_park_owner"
              />
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="6" :md="6" :sm="24">
              <a-form-item label="开始日期" style="width:100%;">
                <j-date placeholder="开始日期" v-model="queryParam['self_begin_time']" style="width:calc(50% - 15px);"></j-date>
                <span class="group-query-strig">~</span>
                <j-date placeholder="结束日期" v-model="queryParam['self_end_time']" style="width:calc(50% - 15px);"></j-date>
              </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="6" :md="6" :sm="24">
            <a-form-item label="费项名称">
              <j-popup
                v-model="queryParam.cost_type"
                org-fields="cost_type,cost_name,tax_rate"
                dest-fields="costType,costName,taxRate"
                field="costType"
                code="v_xy_park_cost_type"
              />
            </a-form-item>
          </a-col>
          <template v-if="toggleSearchStatus">
            <a-col :xl="6" :lg="6" :md="6" :sm="24">
              <a-form-item label="所属项目">
                <j-popup
                  v-model="queryParam.project_code"
                  org-fields="project_code,project_name,project_address"
                  dest-fields="project_code,projectName,projectAddress"
                  field="project_code"
                  code="v_xy_park_projectinfo"
                />
              </a-form-item>
            </a-col>
            <!-- <a-col :xl="6" :lg="6" :md="6" :sm="24">
              <a-form-item label="账单类型" style="width:100%;">
                <j-dict-select-tag v-model="queryParam.bill_type"  placeholder="请选择账单类型" dict-code="xy_park_bill_type"></j-dict-select-tag>
              </a-form-item>
            </a-col> -->
            <a-col :xl="6" :lg="6" :md="6" :sm="24">
              <a-form-item label="账单编码">
                <a-input placeholder="账单编码" v-model="queryParam['bill_code']" style="width:100%;" />
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="6" :md="6" :sm="24">
              <a-form-item label="合同编码">
                <a-input placeholder="合同编码" v-model="queryParam['contract_code']" style="width:100%;" />
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="6" :md="6" :sm="24">
              <a-form-item label="账单开始日期" style="width:100%;">
                <j-date placeholder="开始日期" v-model="queryParam['start_date']" style="width:100%;"></j-date>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="6" :md="6" :sm="24">
              <a-form-item label="账单结束日期" style="width:100%;">
                <j-date placeholder="结束日期" v-model="queryParam['end_date']" style="width:100%;"></j-date>
              </a-form-item>
            </a-col>
          </template>
          <a-col :xl="6" :lg="6" :md="6" :sm="24" >
            <span class="table-page-search-submitButtons">
              <a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- table区域-begin -->
      <vxe-grid
        id="AuditListByBill"
        keep-source
        ref="vxeTable"
        :height="null"
        v-bind="options"
        :expand-config="{accordion: true}"
        :columns="columns"
        :data="dataSource"
        :edit-config="{trigger: 'click', mode: 'row',showStatus: true}"
        @checkbox-change="onSelectChange"
        @checkbox-all="onSelectChange"
        @cell-dblclick="handleCellHblclick"
        @toggle-row-expand="toggleRowExpand"
      >
     <template v-slot:toolbar_buttons>
        <div style="font-size:16px;">
          <span>期初欠款：<b>{{billcount2.unpaid_amount || 0}}</b>;</span>
          <span>本期应收：<b>{{billcount.count || 0}}</b>;</span>
          <span>本期已收：<b>{{billcount.paid_amount || 0}}</b>;</span>
          <span>本期未收：<b>{{billcount.unpaid_amount || 0}}</b>;</span>
          <span>本期应付：<b>{{billcount3.count || 0}}</b>;</span>
          <span>本期已付：<b>{{billcount3.paid_amount || 0}}</b>;</span>
          <span>本期未付：<b>{{billcount3.unpaid_amount || 0}}</b>;</span>
        </div>
      </template>
      <template v-slot:toolbar_tools>
        <vxe-button style="margin-right:12px;" @click="handleExportXls('账单列表')" icon="vxe-icon--download" circle></vxe-button>
      </template>
      <template #action="{ row }">
        <template>
          <a v-if="!row.checkAmount || row.checkAmount < row.amount" @click="handleEdit(row)">匹配</a>
        </template>
      </template>
      <template #content="{ row }">
        <div :style="{width:innerTableWidth}">
          <vxe-grid
            border
            resizable
            align="center"
            :columns="subCol"
            :data="subDataSource[row.bill_code] || []"
          >
          </vxe-grid>
        </div>
      </template>
      <template v-slot:pager>
        <vxe-pager
          :layouts="['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
          :current-page.sync="ipagination.currentPage"
          :page-size.sync="ipagination.pageSize"
          :total="ipagination.total"
          @page-change="handlePageChange"
        >
        </vxe-pager>
      </template>
    </vxe-grid>
  </a-card>
</template>

<script>

import { VxeTableMixin } from '@/mixins/VxeTableMixin'
import { getAction, postAction } from '@/api/manage'
import { filterDictTextByCache } from '@/components/dict/JDictSelectUtil'
import JDate from '@/components/jeecg/JDate'
// import { filterObj } from '@/utils/util'
export default {
  name: 'AuditListByBill',
  mixins: [VxeTableMixin],
  components: {
    JDate
  },
  data() {
    return {
      columns: [
        { type: 'expand', width: 40, slots: { content: 'content' }},
        { type: 'checkbox', width: 40 },
        { type: 'seq', width: 40 },
        { title: '账单编码', field: 'bill_code', showOverflow: true },
        { title: '业主名称', field: 'owner_name', showOverflow: true },
        { title: '费项名称', field: 'cost_name', showOverflow: true },
        { title: '项目名称', field: 'project_name', showOverflow: true },
        { title: '合同编码', field: 'contract_code', showOverflow: true },
        { title: '账单类型', field: 'bill_type', showOverflow: true, slots: { default: ({ row }) => {
          return filterDictTextByCache('xy_park_bill_type', row.bill_type)
        } }},
        { title: '开始日期', field: 'start_date', showOverflow: true },
        { title: '结束日期', field: 'end_date', showOverflow: true },
        { title: '应收/付日期', field: 'due_date', showOverflow: true },
        { title: '账单金额', field: 'amount', showOverflow: true },
        { title: '已收/付金额', field: 'paid_amount', showOverflow: true },
        { title: '未收/付金额', field: 'unpaid_amount', showOverflow: true },
        { title: '备注', field: 'rmark', showOverflow: true }
      ],
      subCol: [
        { type: 'seq', width: 40 },
        { title: '收支编码', field: 'cash_code', showOverflow: true, width: 120 },
        { title: '收支属性', field: 'cash_type', showOverflow: true,
          slots: { default: ({ row }) => {
            return filterDictTextByCache('xy_park_cash_type', row.cash_type)
          } }},
        { title: '收支方式', field: 'cash_method', showOverflow: true,
          slots: { default: ({ row }) => {
            return filterDictTextByCache('xy_park_cash_method', row.cash_method)
          } }},
        { title: '收支账户', field: 'customer_account', showOverflow: true, width: 200 },
        { title: '匹配金额', field: 'check_amount', showOverflow: true },
        // { title: '发生金额', field: 'amount', showOverflow: true, width: 120 },
        // { title: '已匹配金额', field: 'checkAmount', showOverflow: true, width: 100 },
        // { title: '未匹配金额', field: 'c', showOverflow: true, width: 100, slots: { default: ({ row }) => {
        //   return row.checkAmount ? row.amount - row.checkAmount : row.amount
        // } }},
        { title: '手续费', field: 'fee', showOverflow: true },
        { title: '到账/支出金额', field: 'actual_amount', showOverflow: true },
        { title: '缴款日期', field: 'payment_date', showOverflow: true },
        { title: '到账日期', field: 'arrival_date', showOverflow: true },
        { title: '联系人', field: 'plan_name', showOverflow: true },
        { title: '对方账号', field: 'account_code', showOverflow: true },
        { title: '凭证号', field: 'voucher_no', showOverflow: true },
        { title: '收据编号', field: 'receipt_no', showOverflow: true },
        { title: '开票日期', field: 'invoice_date', showOverflow: true },
        { title: '备注', field: 'remark', showOverflow: true }
      ],
      dataSource: [],
      url: {
        list: '/online/cgreport/api/getColumnsAndData/1486642890917941249',
        cashList: '/online/cgreport/api/getColumnsAndData/1480215107463454722',
        billcount: '/online/cgreport/api/getColumnsAndData/1480427823436304386',
        exportXlsUrl: '/online/cgreport/api/exportXls/1486642890917941249',
        billcount2: '/online/cgreport/api/getColumnsAndData/1486605712817000449'
      },
      billcount: {
        unpaid_amount: 0,
        count: 0,
        paid_amount: 0
      },
      billcount3: {
        unpaid_amount: 0,
        count: 0,
        paid_amount: 0
      },
      billcount2: { unpaid_amount: 0 },
      disableMixinCreated: true,
      innerTableWidth: 600,
      subDataSource: {},
      isorter: { order: 'desc', column: '' },
      excludeKeys: ['contract_code', 'bill_code']
    }
  },
  methods: {
    loadData(arg) {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      // 加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.currentPage = 1
      }
      var params = this.getQueryParams()// 查询条件
      this.loading = true
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          this.dataSource = res.result.data.records
          this.ipagination.total = res.result.data.total
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    },
    handleEdit: function(record) {
      this.$refs.modalForm.edit(record)
    },
    handleAuto() {
      this.$refs.AutoAuditList.show()
    },
    toggleRowExpand({ row }) {
      getAction(this.url.cashList, {
        self_bill_code: row.bill_code,
        self_begin_time: this.queryParam.self_begin_time,
        self_end_time: this.queryParam.self_end_time
      }).then(res => {
        if (res) {
          this.$set(this.subDataSource, row.bill_code, res.result.data.records)
          this.subDataSource[row.bill_code] = res.result.data.records
        }
      })
    },
    handleCancel(data) {
      postAction(this.url.deleteAmount, data).then(res => {
        if (res.success) {
          this.$message.success('取消匹配成功')
          this.loadData(1)
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    getTaxAmount(row) {
      const taxRate = row.xyParkCostType ? row.xyParkCostType.taxRate : 0
      const amount = row.amount
      let taxAmount
      if (taxRate && amount) {
        taxAmount = (amount * taxRate) / 100
      } else {
        taxAmount = 0
      }
      return taxAmount
    },
    getBillcount() {
      getAction(this.url.billcount, {
        self_begin_time: this.queryParam.self_begin_time || null,
        self_end_time: this.queryParam.self_end_time || null,
        self_owner_code: this.queryParam.owner_code || null,
        self_cost_type: this.queryParam.cost_type || null,
        self_bill_type: '1',
        self_start_date: this.queryParam.start_date || null,
        self_end_date: this.queryParam.end_date || null,
        self_project_code: this.queryParam.project_code || null,
        self_contract_code: this.queryParam.contract_code || null
      }).then(res => {
        if (res.success) {
          this.billcount = res.result.data.records[0] || {}
        } else {
          this.billcount = {
            unpaid_amount: 0,
            count: 0,
            paid_amount: 0
          }
        }
      })
    },
    getBillcount2() {
      getAction(this.url.billcount2, {
        self_begin_time: this.queryParam.self_begin_time || null,
        self_owner_code: this.queryParam.owner_code || null,
        self_cost_type: this.queryParam.cost_type || null,
        // self_bill_type: '1',
        self_project_code: this.queryParam.project_code || null
      }).then(res => {
        if (res.success) {
          this.billcount2 = res.result.data.records[0] || {}
        } else {
          this.billcount2 = {
            unpaid_amount: 0
          }
        }
      })
    },
    getBillcount3() {
      getAction(this.url.billcount, {
        self_begin_time: this.queryParam.self_begin_time || null,
        self_end_time: this.queryParam.self_end_time || null,
        self_owner_code: this.queryParam.owner_code || null,
        self_cost_type: this.queryParam.cost_type || null,
        self_bill_type: '2',
        self_start_date: this.queryParam.start_date || null,
        self_end_date: this.queryParam.end_date || null,
        self_project_code: this.queryParam.project_code || null,
        self_contract_code: this.queryParam.contract_code || null
      }).then(res => {
        if (res.success) {
          this.billcount3 = res.result.data.records[0] || {}
        } else {
          this.billcount3 = {
            unpaid_amount: 0,
            count: 0,
            paid_amount: 0
          }
        }
      })
    },
    searchQuery() {
      this.selectedRowKeys = []
      this.selectionRows = []
      this.loadData(1)
      this.getBillcount()
      this.getBillcount2()
      this.getBillcount3()
    },
    searchReset() {
      this.selectedRowKeys = []
      this.selectionRows = []
      this.queryParam = {}
      this.loadData(1)
      this.getBillcount()
      this.getBillcount2()
      this.getBillcount3()
    }
  },
  created() {
    this.loadData(1)
    this.getBillcount()
    this.getBillcount2()
    this.getBillcount3()
  },
  mounted() {
    this.$nextTick(() => {
      const tableWidth = this.$refs.vxeTable.$el.clientWidth
      this.innerTableWidth = (tableWidth - 30) + 'px'
    })
  }
}
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>
